<script>
import { chat } from '@/chat';
import ChatBubble from '@/components/ChatBubble.vue';
import ChatHistory from '@/components/ChatHistory.vue';
import ChatIcon from '@/components/ChatIcon.vue'
import ChatInput from '@/components/ChatInput.vue';
import EmojiSelector from '@/components/EmojiSelector.vue';
import RedEnvelope from '@/components/RedEnvelope.vue';
import SpecMsgPanel from '@/components/SpecMsgPanel.vue';
import VoicePanel from '@/components/VoicePanel.vue';
import { setNavbarTitle, useAppStore } from '@/stores/app';
import { mapStores } from 'pinia'
import { Button, Field, List, Uploader } from 'vant';
import Vue from 'vue';

export default {
  components: {
    ChatIcon,
    ChatBubble,
    EmojiSelector,
    Uploader,
    Field,
    List,
    RedEnvelope,
    ChatInput,
    ChatHistory,
    SpecMsgPanel,
    VoicePanel,
    Button
},
  computed: {
    ...mapStores(useAppStore),
    isGroup() {
      return this.$route.params.username?.startsWith('@TGS$')
    }
  },
  data() {
    return {
      userInfo: {},
      message: '',
      showEmojiSelector: false,
      showMsgPanel: false,
      showVoicePanel: false,
      page: 0
    }
  },
  async created() {
    setNavbarTitle(this.$route.query.name)
    Vue.set(chat.history.value, this.$route.params.username, [])
    this.userInfo.user_name = this.$route.params.username
    this.appStore.refreshBalance()

    this.timer = setInterval(() => {
      chat.loadHistory({
        username: this.$route.params.username,
        page: 0,
        updateFirst: true,
        isGroup: this.isGroup
      })
    }, 10000);
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    handleSend() {
      if (!this.message) return
      // 发送消息
      chat.sendMessage({
        to: this.userInfo.user_name,
        type: 'text',
        msg: this.message,
        isGroup: this.isGroup
      })
      this.message = ''
      this.scrollToBottom()
    },
    handleSelectEmoji(name) {
      this.$refs.chatInput.insertEmoji(name)
    },
    scrollToBottom() {
      this.$refs.chatHistory.scrollToBottom()
    },
    togglePanel(type) {
      if (type === 'voice') {
        this.showVoicePanel = true
        this.showMsgPanel = false
        this.showEmojiSelector = false
      } else if (type === 'msg') {
        this.showVoicePanel = false
        this.showMsgPanel = true
        this.showEmojiSelector = false
      } else if (type === 'emoji') {
        this.showVoicePanel = false
        this.showMsgPanel = false
        this.showEmojiSelector = true
      } else {
        this.showVoicePanel = false
        this.showMsgPanel = false
        this.showEmojiSelector = false
      }
    }
  },
}
</script>

<template>
  <div class="chat-view">
    <ChatHistory ref="chatHistory" class="chat-history" :userInfo="userInfo" @touched="togglePanel()" />

    <div class="chat-footer">
      <div class="chat-input-container">
        <div class="chat-input-image-icon">
          <ChatIcon type="voice" :size="30" @click.native="togglePanel('voice')" />
        </div>
        <div class="chat-input">
          <ChatInput v-model="message" @focus="showEmojiSelector = false" ref="chatInput" @send="handleSend" />
        </div>
      </div>

      <div class="chat-emoji">
        <ChatIcon type="emoji" @click.native="togglePanel('emoji')" />
        <ChatIcon type="more" @click.native="togglePanel('msg')" />
        <Button @click="handleSend" round type="primary" size="small" :disabled="!Boolean(message)">发送</Button>
      </div>
    </div>

    <VoicePanel v-model="showVoicePanel"  :userInfo="userInfo" @sended="scrollToBottom"/>
    <SpecMsgPanel v-show="showMsgPanel" :userInfo="userInfo" @sended="scrollToBottom" />
    <EmojiSelector v-show="showEmojiSelector" @select="handleSelectEmoji" />
  </div>
</template>

<style lang="less" scoped>
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #eeeeee;

  .chat-history {
    flex: 1;
    overflow-y: auto;
  }

  .chat-footer {
    background-color: white;
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding-bottom: ~"max(15px, var(--safe-area-inset-bottom))";

    .chat-input-container {
      flex: 1;
      border-radius: 20px;
      background-color: #eeeeee;
      height: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;

      .chat-input-image-icon {
        width: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
      }

      .chat-input {
        padding: 5px;
        padding-right: 15px;
        flex: 1;
        overflow: hidden auto;

        >input {
          width: 100%;
          background-color: transparent;
          border: none;
          outline: none;
        }
      }
    }

    .chat-emoji {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}
</style>
